<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/element-plus/index.css" />
    <script src="./static/js/vue.global.js"></script>
    <script src="./static/element-plus/index.full.js"></script>
    <title>个人主页</title>
    <style>
        .el-carousel__item img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header>
                <el-row>
                    <el-col span="4" style="display: flex; flex-direction: row; align-items: center;">
                        <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
                        <h2>技术社区</h2>
                    </el-col>

                    <el-col :span="8">
                        <el-menu default-active="activeIndex" mode="horizontal" style="border-bottom: none !important">
                            <el-menu-item index="1">首页</el-menu-item>
                            <el-menu-item index="2">文章</el-menu-item>
                            <el-menu-item index="3">课程</el-menu-item>
                            <el-menu-item index="4">商城</el-menu-item>
                        </el-menu>
                    </el-col>

                    <el-col :span="8" style="height: 60px;line-height: 60px;" class="hidden">
                        <el-input placeholder="请输入内容">
                        </el-input>
                    </el-col>
                </el-row>
            </el-header>

            <el-container>
                <el-aside>
                    <el-card>
                        <el-menu default-active="activeIndex">
                            <el-menu-item index="1">个人主页</el-menu-item>
                            <el-menu-item index="2">个人资料</el-menu-item>
                            <el-menu-item index="3">账户设置</el-menu-item>
                            <el-menu-item index="4">消息设置</el-menu-item>
                            <el-menu-item index="5">标签管理</el-menu-item>
                        </el-menu>
                    </el-card>
                </el-aside>
                <el-main>
                    <el-card>
                        <el-row>
                            <el-col :span="4">
                                <img src="./static/image/tou.png" style="height: 100px; width: 100px;">
                            </el-col>
                            <el-col :span="20">
                                <h2>{{ username }}</h2>
                                <span>性别：{{ user.gender }}</span>
                                <span>签名档：{{ user.self }}</span>
                            </el-col>
                        </el-row>
                    </el-card>
                    <el-card>
                        <el-tabs>
                            <el-tab-pane label="我发布的文章">
                                <div v-if="myArticleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>

                            <el-tab-pane label="我收藏的文章">
                                <div v-if="myArticleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>

                            <el-tab-pane label="我收藏的课程">
                                <div v-if="myArticleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>

                            <el-tab-pane label="我收藏的数据">
                                <div v-if="myArticleList.length > 0">列表数据</div>
                                <el-empty v-else description="暂无数据" />
                            </el-tab-pane>
                        </el-tabs>
                    </el-card>
                </el-main>
            </el-container>
            <el-footer>
                <el-row>
                    <el-col :xs="24" :lg="8">
                        <div>
                            <img src="./static/image/logo.png" style="height: 60px; width: 60px;" />
                            <h2>技术社区</h2>
                            <p>致力于构建一个专业的IT技术交流社区</p>
                        </div>
                    </el-col>

                    <el-col :xs="24" :lg="8">
                        <div style="display: flex; flex-direction: column; align-items: flex-start;">
                            <div style="display: flex; gap: 10px;">
                                <el-link>首页</el-link>
                                <el-link>文章</el-link>
                                <el-link>课程</el-link>
                                <el-link>商城</el-link>
                            </div>
                            <div style="display: flex; gap: 10px;">
                                <el-link>关于我们</el-link>
                                <el-link>使用手册</el-link>
                                <el-link>隐私条款</el-link>
                                <el-link>建议反馈</el-link>
                            </div>
                        </div>
                    </el-col>

                    <el-col :xs="24" :lg="8">
                        <div>
                            <h2>联系我们</h2>
                            <p>电话：19710575380</p>
                            <p>邮箱：2945987478@qq.com</p>
                        </div>
                    </el-col>

                    <el-col :xs="24" :lg="8">
                        <p></p>
                    </el-col>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</body>

<script>
    var App = {
        data() {
            return {
                username: 'hsr',
                user: {
                    username: 'hsr',
                    gender: '男',
                    major: '软件工程师',
                    self: '玩玩玩',
                },
                myArticleList: [],
            };
        },
    };
    Vue.createApp(App).use(ElementPlus).mount("#app");
</script>

</html>